<template>
  <div>
    <div class="columns">
      <div class="column">
        <oolongDatePicker type="date" placeholder="选择日期" style="width: 200px"></oolongDatePicker>
      </div>
      <div class="column">
        <oolongDatePicker type="daterange" placement="bottom-end" placeholder="选择日期"
                          style="width: 200px"></oolongDatePicker>
      </div>
    </div>
    <br><br>
    <div class="columns">
      <div class="column">
        <oolongDatePicker type="date" :options="options1" placeholder="选择日期" style="width: 200px"></oolongDatePicker>
      </div>
      <div class="column">
        <oolongDatePicker type="daterange" :options="options2" placement="bottom-end" placeholder="选择日期"
                          style="width: 200px"></oolongDatePicker>
      </div>
    </div>
    <br><br>
    <div class="columns">
      <div class="column">
        <oolongDatePicker :value="value1" format="yyyy年MM月dd日" type="date" placeholder="选择日期"
                          style="width: 200px"></oolongDatePicker>
      </div>
      <div class="column">
        <oolongDatePicker :value="value2" format="yyyy/MM/dd" type="daterange" placement="bottom-end" placeholder="选择日期"
                          style="width: 200px"></oolongDatePicker>
      </div>
    </div>

  </div>
</template>
<script>
export default {
  data() {
    return {
      value1: '2016-01-01',
      value2: ['2016-01-01', '2016-02-15'],
      options1: {
        shortcuts: [
          {
            text: '今天',
            value() {
              return new Date();
            },
            onClick: (picker) => {
              this.$Message.info('点击了今天');
            }
          },
          {
            text: '昨天',
            value() {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              return date;
            },
            onClick: (picker) => {
              this.$Message.info('点击了昨天');
            }
          },
          {
            text: '一周前',
            value() {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              return date;
            },
            onClick: (picker) => {
              this.$Message.info('点击了一周前');
            }
          }
        ]
      },
      options2: {
        shortcuts: [
          {
            text: '最近一周',
            value() {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              return [start, end];
            }
          },
          {
            text: '最近一个月',
            value() {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              return [start, end];
            }
          },
          {
            text: '最近三个月',
            value() {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              return [start, end];
            }
          }
        ]
      }
    }
  }
}
</script>
<style lang="scss" scoped>

</style>
